estoy usando el componente React select para mis selecciones desplegables. Toda la funcionalidad funciona bien, pero no puedo diseñar el color de fondo de la opción seleccionada cuando la opción se selecciona en el menú desplegable. Intenté algunas opciones pero eso tampoco funcionó.
A continuación se muestra el código para el mismo: -
import React, { useContext, useState } from "react"; import moment from "moment"; import Select from "react-select"; import DataProvider from "context/DataContext"; export default function Compare() { const [selectedValue, setSelectedValue] = useState([]); const { fromDate, toDate, } = useContext(DataProvider); const customStyles = { option: (base, state) => ({ ...base, color: "#1e2022", backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white", padding: ".5rem 3rem .5rem .5rem", cursor: "pointer", }), singleValue: (provided, state) => { const opacity = state.isDisabled ? 0.5 : 1; const transition = "opacity 300ms"; return { ...provided, opacity, transition }; }, }; const options = [ { value: [ moment(fromDate).subtract(1, "days"), moment(toDate).subtract(1, "days"), ], label: "Previous Day", }, { value: [ moment(fromDate).subtract(7, "days"), moment(toDate).subtract(7, "days"), ], label: "Previous Week", }, ]; const handleApply = (event) => { setSelectedValue(event); }; return ( <Select onChange={handleApply} options={options} styles={customStyles} placeholder="Compare to Past" /> ); }Hay un problema con respecto a esto. Aparentemente, isSelected solo se proporciona para selección múltiple. Para una selección única, puede verificar:
state.data === state.selectProps.valuehttps://github.com/JedWatson/react-select/issues/3817
[Editar] Esto parece realmente extraño, pero parece que si declaró las opciones fuera del componente, funciona. Consulte aquí . Si copió las opciones dentro de la función de renderizado, el estilo no funcionará. No es un problema con los valores que son Fechas o objetos de momento o algo así, ya que intenté establecer los valores como "1" y "2".
[Edición 2] Ok emm... Lo refactoricé para que sea un componente funcional y funciona con las opciones dentro del componente. Supongo que puede ser un problema con la utilización de ganchos. Mismo sandbox para mirar.
Para cambiar solo el color de fondo de la opción seleccionada, intente esto:
option: (provided, state) => ({ ...provided, backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white", }),En su lugar, podría aprovechar el accesorio hasValue
https://github.com/JedWatson/react-select/issues/3817#issuecomment-547487812
backgroundColor: state.hasValue ? "rgba(189,197,209,.3)" : "white",